<template>
	<div class="left-menu">
        <Sider class="slider" ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed">
            <h1>
                <img style="width:32px;height:32px;" width="32" height="32" class="logo" :src="require('../../../images/logo.png')" alt="">
                <span class="title">慢病管理云平台</span>
            </h1>
            
            <Menu width="auto" :class="menuItemClasses">
                <MenuItem  class="ivu-menu-submenu" to="/"><img class="icon" :width="16" :src="getIcon('首页')" alt=""><span>首页</span></MenuItem>
                <Submenu class="submenu" v-for="(menu,i) in menusFilter" :key="i" :name="key+1" v-show="menu.resourceName!=='首页'">
                    <template slot="title">
                        <img class="icon" :width="18" :src="getIcon(menu.resourceName)" alt=""><span>{{menu.resourceName}}</span>
                    </template>
                    <MenuItem class="menuItem" v-for="(subMenu,j) in menu.childList || []" :key="j" :name="(i+1) + '-' + (j+1)" :to="subMenu.resourceUrl">{{subMenu.resourceName}}</MenuItem>
                </Submenu>
            </Menu>
        </Sider>
    </div>
</template>
<script>
import { mapState, mapMutations } from '@lib/x_.js'
import icon_home from '@images/icon-home.png'
import icon_customer from '@images/icon-customer.png'
import icon_follow from '@images/icon-follow.png'
import icon_intervention from '@images/icon-intervention.png'
import icon_system from '@images/icon-system.png'
import icon_sale from '@images/icon-sale.png'
import icon_analysis from '@images/icon-analysis.png'
export default {
	data() {
		return {
            isCollapsed: false
        }
	},
	computed: {
		...mapState(['hidemenu','menus']),
		menuItemClasses() {
			return ['menu-item', this.isCollapsed ? 'collapsed-menu' : '']
        },

        menusFilter() {

// 三高风险评估   /evaluation/SGPC
// 慢阻肺病风险评估  /evaluation/MXZSXFBCP
// 痛风风险评估   /evaluation/TFPC
// 高血压风险评估  /evaluation/GXYPC
// 高血脂风险评估  /evaluation/GXZPC
// 糖尿病健康评估  /evaluation/TNBPC
// 风险评估记录  /evaluation/history

            const childList = [
                {resourceUrl:'/evaluation/SGPC', resourceName: '三高风险评估',},
                {resourceUrl:'/evaluation/MXZSXFBCP', resourceName: '慢阻肺病风险评估',},
                {resourceUrl:'/evaluation/TFPC', resourceName: '痛风风险评估',},
                {resourceUrl:'/evaluation/GXYPC', resourceName: '高血压风险评估',},
                {resourceUrl:'/evaluation/GXZPC', resourceName: '高血脂风险评估',},
                {resourceUrl:'/evaluation/TNBPC', resourceName: '糖尿病健康评估',},
                {resourceUrl:'/evaluation/history', resourceName: '风险评估记录',},
            ]
            this.menus.map((item,i) => {
                if (item.resourceName === "AI健康评估") {
                    item.childList = childList;
                }
            })
            return this.menus;
        }
	},
	methods: {
        getIcon(name){
            switch (name) {
                case '首页':
                    return icon_home;
                case '患者管理':
                    return icon_customer;
                case '健康干预':
                    return icon_intervention;
                case '健康随访':
                    return icon_follow;
                case 'AI健康评估':
                    return icon_analysis;
                case '系统设置':
                    return icon_system;
                default:
                    return icon_sale;
            }
        },
		collapsedSider() {
			this.$refs.side1.toggleCollapse()
		}
    },
    watch: {
       
    }
}
</script>

<style lang='scss'>
.root {
    .title{
        font-size: 15px;
    }
    .logo{
        position: relative;
        top: 10px;
    }
    // #EAEDF1
    h1{
        color: #fff;
        font-size: 16px;
        line-height: 59px;
        height: 59px;
        text-align: center;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
        position: relative;
        z-index: 99;
        // border-bottom: 1px solid rgba($color: #000, $alpha: 0.1);
    }
	.ivu-menu-vertical .ivu-menu-item:hover,
	.ivu-menu-vertical .ivu-menu-submenu-title:hover {
		color: rgba(255, 255, 255, 0.5);
	}
	.ivu-menu {
		color: #fff;
		a {
			color: #fff;
		}
	}
	.ivu-menu-submenu {
		border-bottom: 1px solid rgba($color: #000000, $alpha: 0.05);
    }
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu){
        background-color: rgba(0, 0, 0, 0.1);
        color: #fff;
    }
    .ivu-menu-vertical.ivu-menu-light:after{
        display: none;
    }
    .icon{
        margin-right: 14px;
        position: relative;
        top: 3px;
    }
    .submenu:hover{
        img{
            opacity: 0.1;
        }
    }
    .submenu:hover{
        img{
            opacity: 0.5;
        }
    }
    .menuItem{
        padding-left: 56px !important;
        font-size: 12px;
    }
    .left-menu{
        max-height: 100%;
        overflow-y: scroll;
        
    }
    .left-menu::-webkit-scrollbar {
        display: none;/*隐藏滚动条*/
    }
    .left-menu::-webkit-scrollbar { width: 0 !important }
    .left-menu { -ms-overflow-style: none; }
    .left-menu { overflow: -moz-scrollbars-none; }

}   
</style>